<script setup>
 import {ref,onMounted} from 'vue'
 import {gradeNumsApi} from '../../../api/stat'

 const option=ref({
    title:{
        text:"年度班级学员数量统计", //主标题
        textStyle:{color:"red"},
        left:"center",
        top:10
    },
     toolbox: {
        show: true,
        feature: {
        magicType: { type: ['line', 'bar'] }, //类型切换
        saveAsImage: {} //下载
        }
    },
    tooltip:{},
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: [],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
        }
    ]
})
const year=ref()
onMounted(()=>{
    loadData()
})
const resetRef=ref({}) //表示子组件对象
const loadData= async()=>{
    const r=await gradeNumsApi({year:year.value})
    option.value.xAxis.data=r.data.names
    option.value.series[0].data=r.data.nums
    //重新渲染一下组件
    resetRef.value.reset();
}

</script>

<template>
<Box>
    <div>   
        <el-form :inline="true" :model="formData">
        <el-form-item label="查询年份">
            <el-input type="number" placeholder="请输入年份" v-model="year" />
        </el-form-item>
             
            <el-form-item>
                <el-button type="primary" @click="loadData"> <span class="iconfont icon-sousuo"></span>搜索 </el-button>
                <el-button type="default"> 重置 </el-button>
              </el-form-item>
            </el-form>
    </div>
    <div>
        <!--  ref 子组件对象 调用暴露的属性或方法 -->
        <Chart ref="resetRef" class="ct1" :option="option"/>
    </div>
</Box>

</template>

<style scoped>
.ct1{
    width:100%;
    height: 400px;

}
</style>